<template>
  <div class="recommend-wrap">
    <div class="top-nav-box">
      <div class="label">猜你喜欢</div>
    </div>
    <div v-for="item in recommendList" :key="item.itemId" style="margin-top:10px">
        <div class="img-box">
      <img
        :src="item.image"
        class="image"
      />
    </div>
    <div class="info-box">
      <div class="title"><router-link :to="{name: 'productDeatil'}">{{item.title}}</router-link></div>
      <div class="score-line">
        <div class="score">
            <p>
            <el-rate
              v-model="item.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate>
          </p>
        </div>
        <div class="comment-number">{{item.commentNum}}个评价</div>
      </div>
      <div class="desc-line">
        <div class="desc">{{item.address}}</div>
      </div>
      <div class="bottom-line">
        <div class="price-box">
          <span>
            <span class="yuan">￥</span>
            <span class="price-number numfont">{{item.avgPrice}}</span>
            <span class="price-desc">起</span>
          </span>
        </div>
      </div>
    </div>
    </div>

  </div>
</template>

<script>
import api from "@/api/index.js";
export default {
  data() {
    return {
      recommendList: []
    };
  },
  created() {
    api.getProducts().then((res) => {
      if (res.data.status == 'success') {
        this.recommendList = res.data.data
      }
    })
  }
};
</script>

<style lang="scss">
@import "@/assets/css/products/recommend.scss";
</style>